<template>
  <li>
    <header>列表渲染</header>
    <ul>
      <li>
        用v-for把一个数组对应为一组元素
        <vfor/>
      </li>
      <li>
        一个对象的v-for
        <vfor-object/>
      </li>
      <li>
        key
        <key/>
      </li>
      <li>
        数组更新检测
        <array-update-check/>
      </li>
      <li>
        对象更新检测注意事项
        <object-update-check/>
      </li>
      <li>
        显示过滤/排序结果
        <filter-and-order/>
      </li>
      <li>
        一段取值范围的v-for
        <vfor-value-range/>
      </li>
      <li>
        v-for on a &lt;template&gt;
        <ul>
          <block v-for="(item, index) in 3" :key="index"/>
          <!-- or -->
          <!-- <li is="Block" v-for="(item, index) in 3" :key="index"/> -->
        </ul>
      </li>
      <li>
        v-for with v-if
        <todos/>
      </li>
      <li>
        一个组件的v-for
        <my-component
          v-for="(item, index) in items"
          v-bind:key="item.id"
          v-bind:item="item"
          v-bind:index="index"
        />
        <todo-list/>
      </li>
    </ul>
  </li>
</template>

<script>
import Vfor from "./samples/Vfor";
import VforObject from "./samples/VforObject";
import Key from "./samples/Key";
import ArrayUpdateCheck from "./samples/ArrayUpdateCheck";
import ObjectUpdateCheck from "./samples/ObjectUpdateCheck";
import FilterAndOrder from "./samples/FilterAndOrder";
import VforValueRange from "./samples/VforValueRange";
import Block from "./samples/Block";
import Todos from "./samples/Todos";
import MyComponent from "./samples/MyComponent";
import TodoList from "./samples/TodoList";

export default {
  name: "List",
  components: {
    Vfor,
    VforObject,
    Key,
    ArrayUpdateCheck,
    ObjectUpdateCheck,
    FilterAndOrder,
    VforValueRange,
    Block,
    Todos,
    MyComponent,
    TodoList
  },
  data() {
    return {
      items: [{ id: 1 }, { id: 2 }]
    };
  }
};
</script>